<template>
	<div class="container">
		<div class="static-content-item">
			<el-alert title="操作说明" type="success" description="点击对应的选项卡进行操作" :closable="false" />
		</div>
		<div class="tab-container">
			<el-tabs v-model="ActiveTab" type="border-card">
				<el-tab-pane v-for="(item,index) in Tablist" :key="index" :name="item.ID" :label="item.Text">
					<el-form v-for="(list,index) in lists[`${item.ID}`]" :model="lists[`${item.ID}`]" ref="formRef" label-width="150px" style="box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;">
						<el-row :gutter="35" v-if="list.Description!=''">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<span class="dialog-footer">
									<el-alert :title="'说明: ' + list.Description" type="info" show-icon :closable="false" />
								</span>
							</el-col>
						</el-row>
						<el-row :gutter="135">
							<el-input v-model="list.ID" type="hidden"></el-input>
							<el-input v-model="list.ParentID" type="hidden"></el-input>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="(list.Type=='text' || list.Type=='textarea') && (list.Html==1)">
								<el-form-item :label="list.Text" prop="ContentValue">
								 <Editor :is-disable="false" v-model="list.Value" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='text' && list.Html==0">
								<el-form-item :label="list.Text" prop="TextValue">
								  <el-input v-model="list.Value" type="text" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='number'">
								<el-form-item :label="list.Text" prop="NumberValue">
								  <el-input v-model="list.Value" type="number" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='email'">
								<el-form-item :label="list.Text" prop="EmailValue">
								  <el-input v-model="list.Value" type="email" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='textarea' && list.Html==0">
								<el-form-item :label="list.Text" prop="TextareaValue">
								  <el-input type="textarea" v-model="list.Value" rows="3"></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='radio'">
								<el-form-item :label="list.Text" prop="RadioValue">
								  <el-radio-group v-model="list.Value">
								    <el-radio v-for="(item, index) in RadioOptions" :key="index" :label="item.value"
								      style="{display: inline}">{{item.label}}</el-radio>
								  </el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='checkbox'">
								<el-form-item :label="list.Text" prop="CheckboxValue">
								 <el-checkbox-group v-model="list.Value">
								    <el-checkbox v-for="(item, index) in CheckboxOptions" :key="index" :label="item.value"
								      style="{display: inline}">{{item.label}}</el-checkbox>
								  </el-checkbox-group>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='select'">
								<el-form-item :label="list.Text" prop="SelectValue">
								  <el-select v-model="list.Value" class="full-width-input" clearable :multiple="list.Multiple==1">
								    <el-option v-for="(item, index) in SelectOptions" :key="index" :label="item.label"
								      :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="list.Type=='date'">
								<el-form-item :label="list.Text" prop="DateValue">
								  <el-date-picker v-model="list.Value" type="date" class="full-width-input" format="YYYY-MM-DD"
								    value-format="YYYY-MM-DD" clearable></el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :offset="12" class="mb20">
								<span class="dialog-footer">
									<el-button type="primary" @click="onSubmit(item.ID,list.ID)" size="large"> 保存 </el-button>
								</span>
							</el-col>
						</el-row>
					  </el-form>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script lang="ts">
	import {
		toRefs,
		reactive,
		onMounted,
		ref
	} from 'vue';
	
	import {
		ParentListAPI,
		SaveAPI,
		GetListAPI,
	} from '/@/api/ConfigManage/index';
	
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus';

	import Editor from '/@/components/editor/index.vue';
	
	import {
		deepClone
	} from '/@/utils/other';
	
	export default {
		name: '',
		components: {
			Editor
		},
		setup() {
			const formRef = ref();
			const state: any = reactive({
				ActiveTab: '',
				Tablist: [],
				lists: {},
				formData: {
				  ID: 0,
				  ParentID: 0,
				  Key: '',
				  Text: '',
				  Description: '',
				  Value: '',
				  Type: 'text',
				  Html: '0',
				  Multiple: null,
				},
				RadioOptions: [{
				  "label": "radio 1",
				  "value": '1'
				}, {
				  "label": "radio 2",
				  "value": '2'
				}, {
				  "label": "radio 3",
				  "value": '3'
				}],
				CheckboxOptions: [{
				  "label": "check 1",
				  "value": '1'
				}, {
				  "label": "check 2",
				  "value": '2'
				}, {
				  "label": "check 3",
				  "value": '3'
				}],
				SelectOptions: [{
				  "label": "select 1",
				  "value": '1'
				}, {
				  "label": "select 2",
				  "value": '2'
				}, {
				  "label": "select 3",
				  "value": '3'
				}],
			});
			onMounted(() => {
				loadData();
			});
			
			/* 初始化数据start */
			const loadData = () => {
				ParentListAPI({}).then(async (response) => {
					if (response.code === 0) {
						state.Tablist = response.result
						state.ActiveTab = state.Tablist[0].ID
						state.Tablist.map(item=>{
							GetListAPI({id: item.ID}).then(async (response) => {
								state.lists[item.ID] = response.result
								state.lists[item.ID].map(item=>{
									if(item.Type=='checkbox') {
										if(item.Value=='') {
											item.Value = []
										}
										else {
											// item.Value = item.Value.substr(1).substring(0,item.Value.substr(1).length-1).split(',')
											item.Value = JSON.parse(item.Value)
										}
									}
									if(item.Type=='select') {
										if(item.Multiple==1) {
											item.Value = JSON.parse(item.Value)
										}
									}
								})
							})
						})
					}
				});
			};
			/* 初始化数据end */
		
			/* 保存数据start */
			const onSubmit = (itemID,listID) => {
				state.lists[itemID].map(item=>{
					if(item.ID==listID) {
						// console.log(item)
						SaveAPI(item).then(async (response) => {
							if (response['code'] === 0) {
								ElMessage.success(`${response.message}`);
							}
						});
					}
				})
			};
			/* 保存数据end */

			return {
				formRef,
				...toRefs(state),
				onSubmit,
			};
		}
	};
</script>


<style>
	.el-form {
		box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset!important;
		padding: 1rem!important;
	}
	.el-radio-group {
		display: block!important;
	}
	.el-radio {
		display: block!important;
	}
	.el-alert {
		border: none!important;
	}
</style>
